<template>
  <div class="vip_build_container">
    <!-- 生日月份和vip选择框区域 -->
    <div class="birthday_vip">
      <!-- 生日下拉框 -->
      <div class="birthday">
        <span>品牌</span>
        <el-select
          v-model="pin_pai_pullSelectValue"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in pin_pai_selectValueList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </div>
      <!-- vip下拉框 -->
      <div class="vip">
        <span>客户</span>
        <el-select
          v-model="ke_hu_pullSelectValue"
          filterable
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in ke_hu_pullSelectValueList"
            :key="index"
            :label="item.no + ' ' + item.name"
            :value="item.no"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 中间一条有长度的灰色的线 -->
    <p class="inline"></p>
    <!-- 按钮区域 -->
    <div class="button_container">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        @click="handleNewBuildBtnClick"
        >新建</el-button
      >
      <el-button icon="el-icon-search" size="small" @click="handleQueryBtnClick"
        >查询</el-button
      >
      <el-button
        icon="el-icon-delete"
        size="small"
        @click="delete_current_rowDataApi"
        >删除</el-button
      >
    </div>
    <!-- table表格区域 -->
    <div class="table_container_teo">
      <el-table
        height="74vh"
        :data="tableData"
        style="width: 100%"
        :cell-style="{ padding: 0, height: '30px' }"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        highlight-current-row
        @row-dblclick="handleTableRowDbClick"
        @row-click="handleTableRowClick"
      >
        <el-table-column
          prop="inputSequence"
          label="客进序号"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="customerName"
          label="客户"
          width="140"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="brandedName" label="品牌" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mainSign" label="主牌" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="minorSign" label="副牌" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="certificate"
          label="合格证"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="neck" label="领标" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="stringSeal" label="吊粒" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="packingBag" label="包装袋" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="totesBag" label="提袋" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="尺码（码标）"
          align="center"
          show-overflow-tooltip
        >
          <el-table-column
            :prop="
              item.size == 9
                ? 'c09'
                : item.size == 1
                ? 'c11'
                : item.size == 3
                ? 'c13'
                : item.size == 5
                ? 'c15'
                : item.size == 'B'
                ? 'c17'
                : item.size == 'C'
                ? 'c19'
                : item.size == 'E'
                ? 'c21'
                : item.size == 'D'
                ? 'f'
                : item.size == 7
                ? 'c07'
                : ''
            "
            :label="item.size"
            v-for="item in this.sizeList"
            :key="item.id"
            show-overflow-tooltip
          >
          </el-table-column>
          <!-- <el-table-column prop="c13" label="46"> </el-table-column>
          <el-table-column prop="date" label="48"> </el-table-column>
          <el-table-column prop="date" label="50"> </el-table-column>
          <el-table-column prop="date" label="54"> </el-table-column>
          <el-table-column prop="date" label="58"> </el-table-column>
          <el-table-column prop="date" label="56"> </el-table-column>
          <el-table-column prop="date" label="60"> </el-table-column>
          <el-table-column prop="date" label="总数"> </el-table-column> -->
          <el-table-column
            prop="totalNumber"
            label="总数"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- 分页容器 -->
      <div class="page_container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[20, 40, 60, 80]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 点击新建和双击表格的时候，弹出的对话框 -->
    <NewBuildZiLiao
      v-if="isShowNewBuildDialog"
      @closeIconCLick="closeIconCLick"
      @jian_ting_keepBtnEvent="jian_ting_keepBtnEvent"
    ></NewBuildZiLiao>
  </div>
</template>
<script>
import NewBuildZiLiao from './ChildComps/NewBuildZiLiao.vue'
//接口
import {
  query_branded_api,
  query_ke_hu_api,
  query_ke_hu_fu_liao_api,
  query_size_data_api,
  delete_hu_liao_data_api
} from '../../../request/client/ke_hu_fu_liao_request.js'
export default {
  data() {
    return {
      // 品牌下拉框选中的值和数组
      pin_pai_pullSelectValue: '',
      pin_pai_selectValueList: [],
      // 客户下拉框选中的值和数据
      ke_hu_pullSelectValue: '',
      ke_hu_pullSelectValueList: [],
      // 表格数据
      tableData: [],
      // 控制新建的dialog的隐藏和显示
      isShowNewBuildDialog: false,
      // 尺码表头
      sizeList: [],
      // 表格row选中的对象
      currentTableRowObj: {},
      // 分页相关
      pageTotal: 0,
      currentPage4: 1,
      limit: 50,
      page: 1
    }
  },
  async created() {
    this.query_branded_data()
    this.query_ke_hu()
    this.query_size_data()
  },
  methods: {
    // 分页中显示多少条改变的时候，触发的函数
    handleSizeChange(pageSize) {
      console.log(pageSize, 'handleSizeChange')
      // 改变条数就行
      this.limit = pageSize
      this.handleQueryBtnClick()
      //
    },
    //
    handleCurrentChange(pages) {
      console.log(pages, '当前')
      // 改变页数就行
      this.page = pages
      this.handleQueryBtnClick()
    },
    //  新建子组件被点击保存的时候，触发的函数
    jian_ting_keepBtnEvent() {
      // 后端要求，保存就刷新（不用判断）
      // if (this.tableData.length) {
      //   this.handleQueryBtnClick()
      // }
      this.handleQueryBtnClick()
      this.isShowNewBuildDialog = false
    },
    //   箭头新建子组件被点击的时候，触发的函数
    closeIconCLick() {
      this.isShowNewBuildDialog = false
    },
    //
    handleNewBuildBtnClick() {
      this.isShowNewBuildDialog = true
    },
    // 点击查询的时候，触发的函数
    async handleQueryBtnClick() {
      const paramsObj = {
        brandedName: this.pin_pai_pullSelectValue,
        customerNo: this.ke_hu_pullSelectValue,
        limit: this.limit,
        page: this.page
      }
      const { data: res } = await query_ke_hu_fu_liao_api(paramsObj)
      console.log(res, 'query_ke_hu_fu_liao_api')
      //   查询成功，填充表格
      if (res.code !== 200 && res.code !== 11500) return
      // 没有数据那么就清空列表
      if (!res.data) {
        this.tableData = []
        return
      }
      // 成功并且有数据赋值给总条数
      this.pageTotal = res.total
      // 后端要拼接显示
      res.data.map((item) => {
        item.customerName = item.customerNo + '.' + item.customerName
      })
      this.tableData = res.data
    },
    // 点击删除的时候，触发的函数
    async delete_current_rowDataApi() {
      // 没有选中数据，不能删除
      if (!Object.keys(this.currentTableRowObj).length) return
      // 提示用户是否删除
      this.$confirm(
        `确定是否删除序号：${this.currentTableRowObj.inputSequence}下的辅料数据？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          // 当用户点击确认删除的时候，逻辑走这里
          const { data: res } = await delete_hu_liao_data_api({
            inputSequence: this.currentTableRowObj.inputSequence
          })
          console.log(res, 'delete_hu_liao_data_api')
          if (res.code !== 200)
            return this.$message.warning('删除失败，请稍后再试')
          //   删除成功之后，刷新列表
          this.handleQueryBtnClick()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //
    handleTableRowDbClick() {},
    // 表格中的行被点击的时候，触发的函数
    handleTableRowClick(row) {
      console.log(row)
      this.currentTableRowObj = row
    },
    //查询品牌的接口
    async query_branded_data() {
      const { data: res } = await query_branded_api()
      console.log(res, 'query')
      this.pin_pai_selectValueList = res.data
    },
    // 查询客户的接口
    async query_ke_hu() {
      const { data: res } = await query_ke_hu_api()
      console.log(res, 'query_ke_hu_api')
      this.ke_hu_pullSelectValueList = res.data
    },
    //
    async query_size_data() {
      const { data: res } = await query_size_data_api()
      console.log(res, 'query_size_data_api')
      this.sizeList = res.data
    }
  },
  components: {
    NewBuildZiLiao
  }
}
</script>

<style lang="less" scoped>
.page_container {
  margin-top: 1vh;
  display: flex;
  justify-content: flex-end;
  /deep/.el-input__inner {
    width: 100%;
  }
}
// 解决要刷新才能显示的问题
// .table_container_teo {
//   //   height: 65vh;
// }
// 容器
.vip_build_container {
  background-color: #fff;
  padding: 20px;
  min-width: 1200px;
  // 新增
  height: 100%;
  width: 100%;
  //所有下拉框容器
  .birthday_vip {
    display: flex;
    font-size: 16px;
    margin-bottom: 16px;
    span {
      margin-right: 7px;
    }
    .el-select {
      width: 160px;
      height: 32px;
      /deep/.el-input {
        height: 32px;
        .el-input__inner {
          height: 32px;
        }
        // 解决下拉框高度改变之后，下拉箭头小图标不对齐
        .el-input__icon {
          line-height: unset;
        }
      }
    }
    .vip {
      margin-left: 16px;
    }
  }
  // 中间的线
  .inline {
    width: 100%;
    height: 1px;
    background: #f6f6f6;
  }
  // 按钮的容器
  .button_container {
    margin-bottom: 16px;
    margin-top: 16px;
    /* 统一按钮的字体大小 */
    .el-button {
      // 按钮里面的字体统一是14px
      font-size: 14px;
    }
  }
}
</style>
